<!--
	作者：1979788761@qq.com
	时间：2022-01-11
	描述：常用卡片使用演示
-->
<!doctype html>
<html lang="en">

	<head>
		<!-- 页面编码 -->
		<meta charset="utf-8">
		<!-- 移动设备优先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 兼容Edge模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 极速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 标题 -->
		<title>常用卡片使用演示</title>
		<!-- 关键字 -->
		<meta name="keywords" content="BlogUi,常用卡片使用演示" />
		<!-- 描述 -->
		<meta name="description" content="这是BlogUi常用卡片使用演示" />
		<!-- 作者 -->
		<meta name="author" content="大火兔" />
		<!-- 版权 -->
		<meta name="copyright" content="版权所有 BlogUi All Rights Reserved" />
		<!-- 搜索引擎索引向导 -->
		<meta name="robots" content="all" />
		<!-- 图标 -->
	    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	    <link rel="icon" type="image/svg+xml" href="favicon.ico" />
		<!-- 引入BlogUi.less -->
		<link rel="stylesheet/less" type="text/css" href="../css/blogui.less">
		<!-- 引入最新稳定版Less.js -->
		<script src="../js/less.min.js"></script>
		<style type="text/css">
			.yourclass {
				width: 300px;
				height: 200px;
			}
			
			.yourclass .img {
				height: 160px;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<br />
			<!-- .yourclass 根据自己的需要调整宽度高度，默认.card宽度，高度根据内容自适应 -->
			<div class="card yourclass">
				<a href="#" title="时光是沙漏，回忆是里面的沙子，放不下过去的人，总是希望把它颠倒过来">
					<div class="img">
						<img src="https://t7.baidu.com/it/u=993577982,1027868784&fm=193&f=GIF" height="150" />
					</div>
					<div class="text">
						时光是沙漏，回忆是里面的沙子
					</div>
				</a>
			</div>
		</div>
	</body>
	<!-- 引入兼容IE8的jQuery版本 -->
	<script src="../js/jquery-1.12.4.min.js"></script>
	<!-- 引入BlogUi框架Js -->
	<script src="../js/blogui.js"></script>
	<!-- 引入你的JS -->
	<script src="../js/your.js"></script>

</html>